<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>PracticeNavbar</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <script src="../js/bootstrap.js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/bootstrap.js/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/bootstrap.js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../css/font-awesome-4.7.0/css/font-awesome.min.css"/>
    <style type="text/css">
        header a:hover{
            color: #ffffff!important;
        }
        footer{
            color: rgba(255,255,255,0.7);
        }
        .footer-nav li{
            padding: 5px;
        }
        .footer-nav a{
            color: #ffffff!important;
        }
    </style>
</head>
<body>
  <header>
      <nav class="navbar navbar-expand-lg navbar-dark fixed-top" style="background: rgba(0,0,0,0.9);">
          <a href="#" class="navbar-brand">Sakura</a>
          <button type="button" class="navbar-toggler">
              <span class="navbar-toggler-icon"
                    data-toggle="collapse"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                    aria-controls="firstProject"
                    data-target="#firstProject"></span>
          </button>
          <div class="collapse navbar-collapse" id="firstProject">
              <ul class="navbar-nav mr-auto">
                  <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-home pr-1"></i>Home</a></li>
                  <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-product-hunt pr-1"></i>Product</a></li>
                  <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-plane pr-1"></i>Travel</a></li>
                  <li class="nav-item dropdown">
                      <a href="#"
                         role="button"
                         id="dTest"
                         data-toggle="dropdown"
                         class="dropdown-toggle nav-link"
                         aria-haspopup="true"
                         aria-expanded="false"><i class="fa fa-diamond pr-1"></i>Diamand</a>
                      <div class="dropdown-menu" aria-labelledby="dTest">
                          <div class="dropdown-header">dHeader-01</div>
                          <a href="#" class="dropdown-item">subMenu-01</a>
                          <a href="#" class="dropdown-item">subMenu-02</a>
                          <a href="#" class="dropdown-item">subMenu-03</a>
                          <div class="dropdown-divider"></div>
                          <div class="dropdown-header">dHeader-02</div>
                          <a href="#" class="dropdown-item">subMenu-aa</a>
                          <a href="#" class="dropdown-item">dHeader-zz</a>
                      </div>
                  </li>
                  <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-phone pr-1"></i>Contact</a></li>
              </ul>
              <form class="form-inline">
                  <input type="search" placeholder="Search" class="form-control mr-1">
                  <!--button有哪些class？大小 基础的8中类 外边框也可以与基础类结合使用-->
                  <button class="btn btn-secondary btn-outline-success" type="submit">Search</button>
                  <span class="ml-5 text-light"><i class="fa fa-user" style="font-size: 1.5rem"></i></span>
              </form>
          </div>
      </nav>
  </header>

  <main role="main">
      <div class="jumbotron" style="margin-top: 2rem; margin-bottom: 0;">
          <div class="container">
              <h1 class="display-4">Welcome!</h1>
              <p>
                  This is Donzia's workspace. I feel great honor that you are here and there are
                  something you would be like.
              </p>
              <a href="Signin.html" role="button" class="btn btn-primary btn-outline-success">Learn more
                  <i class="pl-2">&gt;&gt;</i></a>
          </div>
      </div>

      <div id="carousel" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
              <li class="" data-target="#carousel" data-slide-to="0"></li>
              <li class="" data-target="#carousel" data-slide-to="1"></li>
              <li class="" data-target="#carousel" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
              <div class="carousel-item active bg-light">
                  <!--carousel-item里面可以包含任何内容形式，当然，一般为图片，用来展示产品和新的活动信息-->
                  <img class="d-block w-100" src="../picture/blue.png" alt="interesting">
              </div>
              <div class="carousel-item bg-dark">
                  <img class="d-block w-100" src="../picture/pepper.png" alt="interesting">
              </div>
              <div class="carousel-item bg-danger">
                  <img class="d-block w-100" src="../picture/yellowRed.png" alt="interesting">
              </div>
          </div>
          <a href="#carousel" class="carousel-control-prev" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          </a>
          <a href="#carousel" class="carousel-control-next" role="button" data-slide="prev">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
          </a>
      </div>

      <div class="d-md-flex w-100 py-md-3 py-2 text-center justify-content-md-between" style="overflow: hidden;">
          <div class="mx-md-3 p-3">
              <h1 class="display-4">A favor</h1>
              <p class="p-3">These are some useful information. Please read them word by word</p>
              <div class="mx-auto" style="height: 300px; width: 80%; background:#000; border-radius: 20px 20px 0 0"></div>
          </div>
          <div class="p-3 bg-dark text-white mx-md-3">
              <h1 class="display-4">See you</h1>
              <p class="p-3">These are some useful information. Please read them word by word</p>
              <div class="mx-auto" style="height: 300px; background: #fff324; width: 80%; border-radius: 20px 20px 0 0"></div>
          </div>
      </div>
      <div class="d-md-flex w-100 py-md-3 py-2 text-center justify-content-md-between" style="overflow: hidden;">
          <div class="mx-md-3 p-3">
              <h1 class="display-4">A favor</h1>
              <p class="p-3">These are some useful information. Please read them word by word</p>
              <div class="mx-auto" style="height: 300px; width: 80%; background:#000; border-radius: 20px 20px 0 0"></div>
          </div>
          <div class="p-3 bg-dark text-white mx-md-3">
              <h1 class="display-4">See you</h1>
              <p class="p-3">These are some useful information. Please read them word by word</p>
              <div class="mx-auto" style="height: 300px; background: #fff324; width: 80%; border-radius: 20px 20px 0 0"></div>
          </div>
      </div>
      <div class="d-md-flex w-100 py-md-3 py-2 text-center justify-content-md-between" style="overflow: hidden;">
          <div class="mx-md-3 p-3">
              <h1 class="display-4">A favor</h1>
              <p class="p-3">These are some useful information. Please read them word by word</p>
              <div class="mx-auto" style="height: 300px; width: 80%; background:#000; border-radius: 20px 20px 0 0"></div>
          </div>
          <div class="p-3 bg-dark text-white mx-md-3">
              <h1 class="display-4">See you</h1>
              <p class="p-3">These are some useful information. Please read them word by word</p>
              <div class="mx-auto" style="height: 300px; background: #fff324; width: 80%; border-radius: 20px 20px 0 0"></div>
          </div>
      </div>
  </main>
  <footer class="bg-dark">
      <div class="container-fluid p-3 p-md-5">
          <ul class="d-flex justify-content-start list-unstyled mb-3 footer-nav">
              <li class="pl-0">
                  <a href="#">GitHub</a>
              </li>
              <li>
                  <a href="#">Twitter</a>
              </li>
              <li>
                  <a href="#">About</a>
              </li>
              <li>
                  <a href="#">Serves</a>
              </li>
          </ul>
          <p class="m-0">
              Thank you for your donations. We always feel happy for receiving any idea from you.
          </p>
          <p>
              Working hour: 00:00 ~ 24:00
          </p>
          <p>&copy;2017-2019 Shenzhen Star ltd. co.</p>
      </div>
  </footer>
</body>
</html>
